@charset "UTF-8";
@import url('pub.css');
.banner{ top:50px; position: relative; width: 100% !important;}
.banner ul li{width: 100% !important;}
.article-box .col-xs-6{ 
	padding: 5px; 
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
	width: 280px; 
	height: 270px;  
	margin: 0 10px 23px 10px; 
	background: #fff; position: relative;
	overflow: hidden;
}
.article-box img{ width: 100%; height: 100%; position: relative; }
.two-box{ width: 580px !important;}
.content-main{ padding-top: 70px; padding-bottom: 100px;}

.mask { 
	position: absolute; 
	width: 100%; 
	height: 100%; 
	text-align: center;

   	background-color: rgba(0,0,0,0.6);
   	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity=0);
   	opacity: 0;
   	-webkit-transform: translate(460px, -100%) rotate(180deg);
   	-moz-transform: translate(460px, -100%) rotate(180deg);
   	-o-transform: translate(460px, -100%) rotate(180deg);
   	-ms-transform: translate(460px, -100%) rotate(180deg);
   	transform: translate(460px, -100%) rotate(180deg);
   	-webkit-transition: all 0.2s 0.2s ease-in-out;
   	-moz-transition: all 0.2s 0.2s ease-in-out;
   	-o-transition: all 0.2s 0.2s ease-in-out;
   	-ms-transition: all 0.2s 0.2s ease-in-out;
   	transition: all 0.2s 0.2s ease-in-out;
}
.mask a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    -webkit-box-shadow: 0 0 1px #000;
    -moz-box-shadow: 0 0 1px #000;
    box-shadow: 0 0 1px #000;
}
.mask p {
    font-size: 16px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center;
}
.mask h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 30px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0;
}
.article-box>.col-xs-6 h2 {
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -o-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    transform: translateY(-100px);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.article-box>.col-xs-6 p {
   	-webkit-transform: translateX(300px) rotate(90deg);
   	-moz-transform: translateX(300px) rotate(90deg);
   	-o-transform: translateX(300px) rotate(90deg);
   	-ms-transform: translateX(300px) rotate(90deg);
   	transform: translateX(300px) rotate(90deg);
   	-webkit-transition: all 0.2s ease-in-out;
   	-moz-transition: all 0.2s ease-in-out;
   	-o-transition: all 0.2s ease-in-out;
   	-ms-transition: all 0.2s ease-in-out;
   	transition: all 0.2s ease-in-out;
}
.article-box>.col-xs-6 a.info {
   	-webkit-transform: translateY(-300px);
   	-moz-transform: translateY(-300px);
   	-o-transform: translateY(-300px);
   	-ms-transform: translateY(-300px);
   	transform: translateY(-300px);
   	-webkit-transition: all 0.2s ease-in-out;
   	-moz-transition: all 0.2s ease-in-out;
   	-o-transition: all 0.2s ease-in-out;
   	-ms-transition: all 0.2s ease-in-out;
   	transition: all 0.2s ease-in-out;
}
.article-box>.col-xs-6:hover .mask {
   	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
   	-webkit-transition-delay: 0s;
   	-moz-transition-delay: 0s;
   	-o-transition-delay: 0s;
   	-ms-transition-delay: 0s;
   	transition-delay: 0s;
   	-webkit-transform: translate(-5px, -98%);
   	-moz-transform: translate(-5px, -98%);
   	-o-transform: translate(-5px, -98%);
   	-ms-transform: translate(-5px, -98%);
   	transform: translate(-5px, -98%);
}
.article-box>.col-xs-6:hover h2 {
   	-webkit-transform: translateY(0px);
   	-moz-transform: translateY(0px);
   	-o-transform: translateY(0px);
   	-ms-transform: translateY(0px);
   	transform: translateY(0px);
   	-webkit-transition-delay: 0.2s;
   	-moz-transition-delay: 0.2s;
   	-o-transition-delay: 0.2s;
   	-ms-transition-delay: 0.2s;
   	transition-delay: 0.2s;
}
.article-box>.col-xs-6:hover p {
   	-webkit-transform: translateX(0px) rotate(0deg);
   	-moz-transform: translateX(0px) rotate(0deg);
   	-o-transform: translateX(0px) rotate(0deg);
   	-ms-transform: translateX(0px) rotate(0deg);
   	transform: translateX(0px) rotate(0deg);
   	-webkit-transition-delay: 0.1s;
   	-moz-transition-delay: 0.1s;
   	-o-transition-delay: 0.1s;
   	-ms-transition-delay: 0.1s;
   	transition-delay: 0.1s;
}
.article-box>.col-xs-6:hover a.info {
  	-webkit-transform: translateY(0px);
  	-moz-transform: translateY(0px);
  	-o-transform: translateY(0px);
  	-ms-transform: translateY(0px);
  	transform: translateY(0px);
  	-webkit-transition-delay: 0.2s;
  	-moz-transition-delay: 0.2s;
  	-o-transition-delay: 0.2s;
  	-ms-transition-delay: 0.2s;
  	transition-delay: 0.2s;
}